<template>
  <div class="h-empty">
    <view class="empty-flex" :style="{height:heightVal=='100%'?'':heightVal}">
      <view class="empty _df _ac _fc _jb">
        <image :src="emptyUrl" alt="" />
        <view class="title">{{ title }}</view>
        <view class="tips-flex" v-if="tips.length > 0">
          <template v-for="(tip, index) in tips">
            <view class="tip mb10" :key="index">{{ tip }}</view>
          </template>
        </view>
      </view>
    </view>
  </div>
</template>

<script>
export default {
  name: "l-empty",
  props: {
    // 接收参数 title-标题，tips[Array]-提示文字
    emptyObj: {
      type: Object,
      default() {
        return {};
      },
    },
    height:{
      type:String,
      default:'100vh'
    }
  },
  data() {
    return {
      emptyUrl: "/static/img/news/def_empty.png",
      title: "暂无记录", // 标题
      tips: [], //提示文字,可不传
      heightVal:''
    };
  },
  computed: {},
  methods: {},
  watch: {
    height(h){
      this.heightVal = h
    }
  },

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    if (this.emptyObj.title != undefined) {
      this.title = this.emptyObj.title || "暂无记录";
    }
    if (this.emptyObj.tips != undefined && this.emptyObj.tips.length > 0) {
      this.tips = this.emptyObj.tips || [];
    }
    this.heightVal = this.height
  },
};
</script>

<style lang="scss" scoped>
.h-empty {
  .empty-flex {
    background: $uni-page-color;
    .empty {
      padding-top: 126rpx;
      image {
        width: 502rpx;
        height: 430rpx;
      }
    }
    .title {
      padding-top: 22rpx;
      font-size: $uni-font-size-30;
      color: #4a4a4a;
      padding-bottom: 16rpx;
    }
    .tips-flex {
      .tip {
        font-size: $uni-font-size-22;
        color: #9b9b9b;
      }
    }
  }
}
</style>